<template>
    <div class="page-container" style="height: auto">
        <div class="in-container" style="height: auto">
            <el-tabs
                v-model="tabActive"
                @tab-click="tabClick"
                type="card"
                style="margin-bottom: 8px">
                <el-tab-pane name="UnReconciled" label="未对账"></el-tab-pane>
                <el-tab-pane name="AccountsReconciled" label="已对账"></el-tab-pane>
            </el-tabs>
            <UnReconciled :DocType="1" v-if="tabActive == 'UnReconciled'"></UnReconciled>
            <AccountsReconciled
                :DocType="1"
                v-if="tabActive == 'AccountsReconciled'"></AccountsReconciled>
        </div>
    </div>
</template>

<script setup>
import UnReconciled from './components/UnReconciled.vue'
import AccountsReconciled from './components/AccountsReconciled.vue'
import { defineComponent, ref } from 'vue'

const tabActive = ref('UnReconciled')
</script>

<style lang="scss" scoped>
:deep(.in-container .el-tabs--card > .el-tabs__header) {
    border-bottom: 1px solid var(--el-border-color-light) !important;
}
</style>
